<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="商品ID，必须是整数"></el-input>
				</el-form-item>
        <el-form-item>
					<el-input v-model="filters.name" placeholder="用户名称"></el-input>
				</el-form-item>
        <el-form-item>
					<el-input v-model="filters.productName" placeholder="商品名称"></el-input>
				</el-form-item>
         <el-form-item>
				<el-select v-model="filters.commentNum" clearable placeholder="评价星级" style="width:120px">
						<el-option value="1">1星</el-option>
            <el-option value="2">2星</el-option>
            <el-option value="3">3星</el-option>
            <el-option value="4">4星</el-option>
            <el-option value="5">5星</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="handleFilter">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--列表-->
		<el-table :data="list" highlight-current-row v-loading="listLoading" @selection-change="selsChange"  style="width: 100%;">
			<el-table-column prop="id" type="selection" width="60">
			</el-table-column>
			<el-table-column prop="id" label="商品ID" width="120">
			</el-table-column>
      <el-table-column prop="productName" label="产品名称"  width="120">
			</el-table-column>
			<el-table-column prop="nickName" label="用户昵称"  width="120">
			</el-table-column>
			<el-table-column prop="commentNum" label="评论星级" width="100">
        <template slot-scope="scope">
           <span>{{scope.row.commentNum}}星</span>
				</template>
			</el-table-column>
			<el-table-column prop="content" label="内容" min-width="180">
			</el-table-column>
			
      <el-table-column prop="contenPic" label="内容图片" min-width="120">
         <template slot-scope="scope">
           <a @click="showImg(scope.row.contenPic)" v-if="scope.row.contenPic">点击查看</a>
           <span v-if="!scope.row.contenPic">无</span>
				</template>
			</el-table-column>
			
      <el-table-column prop="commentDate" label="评论时间" min-width="120" sortable>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

    <el-dialog title="查看图片" v-model="imgFormVisible" :close-on-click-modal="false">
      <div>
        <el-carousel height="300px">
          <el-carousel-item v-for="item in imgSrcs" :key="item">
             <img :src="item" alt="加载失败">
          </el-carousel-item>
        </el-carousel>
      </div>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="imgFormVisible = false">取消</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
import util from "../../common/js/util";
//import NProgress from 'nprogress'
import {
  fetchComments,
  removeComment,
  batchRemoveComments
} from "../../api/api";

export default {
  data() {
    return {
      filters: {
        keyword: undefined,
        name: undefined,
        productName: undefined,
        commentNum: undefined
      },
      list: [],
      total: 0,
      currentPage: 1,
      listLoading: false,
      sels: [], //列表选中列
      imgFormVisible: false,
      imgSrcs: ""
    };
  },
  methods: {
    showImg(src) {
      console.log(src);
      this.imgFormVisible = true;
      this.imgSrc = src.split(",");
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    handleFilter() {
      if (isNaN(Number(this.filters.keyword)) && this.filters.keyword) {
        this.$message({
          message: "输入参数不是整数",
          type: "warning"
        });

        return;
      }

      this.getList();
    },
    //获取用户列表
    getList() {
      let para = {
        currentPage: this.currentPage,
        productId: this.filters.keyword
          ? Number(this.filters.keyword)
          : undefined
      };
      this.listLoading = true;
      //NProgress.start();
      fetchComments(para).then(res => {
        console.log(res);
        this.total = res.data.total;
        this.list = res.data.comments;
        this.listLoading = false;
        //NProgress.done();
      });
    },
    //删除
    handleDel: function(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { id: row.id };
          removeComment(para).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    selsChange: function(sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function() {
      var ids = this.sels.map(item => item.id);
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let para = { ids: ids };
          batchRemoveComments(para).then(res => {
            this.listLoading = false;
            //NProgress.done();
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getList();
          });
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style scoped>
</style>